<template>
    <div class="custom-table">
        <div class="table-row header-row">
            <div class="table-cell header-cell">对比维度</div>
            <div v-for="(item, index) in tableData" :key="index" class="table-cell header-cell">
                患者{{ index + 1 }}
            </div>
        </div>

        <div v-for="(row, rowIndex) in transformedData" :key="rowIndex" class="table-row">
            <div class="table-cell row-header">{{ row.name }}</div>
            <div v-for="(value, colIndex) in row.values" :key="colIndex" class="table-cell">
                <!-- {{ value }} -->
                     <div v-html="value"></div>
            </div>

        </div>
    </div>
</template>

<script setup >
import { ref, computed } from 'vue';

const tableData = ref([
    {
        info: '男，30岁，无基础疾病，无烟酒嗜好',
        diseaseCourse: '肛周肿胀疼痛10天',
        symptom: '排便时疼痛加剧',
        inspection: '直肠指检波动感阳性',
        imagingExamination: '未进行（仅直肠指检）',
        diagnose: '1.肛门疼痛加剧   <br/>2.局部红肿波动感<br/>3.中性粒细胞升高',
        treat: '急诊切开引流',
        postoperativeCare:'每日换药1-2次',
    },
    {
        info: '男，20岁，无特殊病史',
        diseaseCourse: '肛门剧烈疼痛3天',
        symptom: '肛周剧烈跳痛',
        inspection: '炎症指标显著升高',
        imagingExamination: '未提及',
        diagnose: '1.肛门疼痛加剧   <br/>2.局部红肿波动感<br/>3.中性粒细胞升高',
        treat: '切开排脓术',
          postoperativeCare:'术后6小时下床活动',
    },
    {
        info: '男，30岁，无基础疾病，无烟酒嗜好',
        diseaseCourse: '发热',
        symptom: '上海市普陀区金沙江路 1518 弄',
        inspection: '直肠指检波动感阳性',
        imagingExamination: '未进行',
        diagnose: '1.肛门疼痛加剧   <br/>2.局部红肿波动感<br/>3.中性粒细胞升高',
        treat: '急诊切开引流',
          postoperativeCare:'每日换药1-2次',
    }
]);

const transformedData = computed(() => {
    return [
        {
            name: '基本信息',
            values: tableData.value.map(item => item.info)
        },
        {
            name: '病程',
            values: tableData.value.map(item => item.diseaseCourse)
        },
        {
            name: '典型症状',
            values: tableData.value.map(item => item.symptom)
        },
        {
            name: '实验室检查',
            values: tableData.value.map(item => item.inspection)
        },
        {
            name: '影像学检查',
            values: tableData.value.map(item => item.imagingExamination)
        },

        {
            name: '诊断依据',
            values: tableData.value.map(item => item.diagnose)
        },
        {
            name: '治疗方案',
            values: tableData.value.map(item => item.treat)
        },
         {
            name: '术后护理',
            values: tableData.value.map(item => item.postoperativeCare)
        },
    ];
});
</script>

<style>
.custom-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

.table-row {
    display: table-row;
}

.table-cell {
    display: table-cell;
    padding: 12px 15px;
    border: 1px solid #ebeef5;
}

.header-row {
    background-color: #f5f7fa;
}

.header-cell {
    font-weight: bold;
}

.row-header {
    background-color: #f5f7fa;
    font-weight: bold;
}
</style>